<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { onBeforeRouteUpdate } from "vue-router";
import mianHomeCard from "./mianHomeCard.vue";
import TypeHomeCard from "./typeHomeCard.vue";
onBeforeRouteUpdate((to, from, next) => {
  console.log(from.meta);
});
let box = ref(null);
const moveEvent = () => {
  let startTime = ""; // 触摸开始时间
  let container = document.querySelector(".homeViewContainer");
  let startDistanceX = ""; // 触摸开始X轴位置
  let startDistanceY = ""; // 触摸开始Y轴位置
  let endTime = ""; // 触摸结束时间
  let endDistanceX = ""; // 触摸结束X轴位置
  let endDistanceY = ""; // 触摸结束Y轴位置
  let moveTime = ""; // 触摸时间
  let moveDistanceX = ""; // 触摸移动X轴距离
  let moveDistanceY = ""; // 触摸移动Y轴距离
  (box.value as any).addEventListener("touchstart", (e) => {
    startTime = new Date().getTime();
    startDistanceX = e.touches[0].screenX;
    startDistanceY = e.touches[0].screenY;
  });
  box.value.addEventListener("touchend", (e) => {
    endTime = new Date().getTime();
    endDistanceX = e.changedTouches[0].screenX;
    endDistanceY = e.changedTouches[0].screenY;
    moveTime = endTime - startTime;
    moveDistanceX = startDistanceX - endDistanceX;
    moveDistanceY = startDistanceY - endDistanceY;
    console.log(moveDistanceX, moveDistanceY);
    // 判断滑动距离超过40 且 时间小于500毫秒
    if (
      (Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) &&
      moveTime < 500
    ) {
      // 判断X轴移动的距离是否大于Y轴移动的距离
      if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        // 左右
        if (moveDistanceX > 0) {
          // container.setAttribute('transfrom','translateX(100%)')
        }
        console.log(moveDistanceX > 0 ? "左" : "右");
      } else {
        // 上下
        console.log(moveDistanceY > 0 ? "上" : "下");
      }
    }
  });
};
onMounted(() => {
  moveEvent();
});
</script>

<template>
  <div ref="box" class="homeViewContainer">
    <mian-home-card />
    <type-home-card />
  </div>
</template>

<style lang="less" scoped>
.homeViewContainer {
  background: #f5f5f5;
  margin-bottom: 100px;
  // transform: translateX(100%);
  // transition: transform .5s ease .5s;
}
</style>